<script setup lang="ts">
import * as ElementPlusIcons from '@element-plus/icons-vue';
import svgList from '@/assets/icons/requireIcons';

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
});

const emit = defineEmits(['update:modelValue']);

const iconSelectRef = ref()

const showChooseIcon = ref(false);

const iconList = ref<string[]>([]);

const filterText = ref('');

const iconFilterList = ref<string[]>([])

const svgFilterList = ref<string[]>([])

watch(filterText, (val) => {
  iconFilterList.value = iconList.value.filter(item => item.includes(val))
  svgFilterList.value = svgList.filter(item => item.includes(val))
})

function getIconList() {
  iconList.value = Object.keys(ElementPlusIcons);
  iconFilterList.value = iconList.value
  svgFilterList.value = svgList
}

function iconSelect(item: string) {
  emit('update:modelValue', item);
  nextTick(() => {
    iconSelectRef.value.focus();
    iconSelectRef.value.blur();
  })

  showChooseIcon.value = false;
}

getIconList()
</script>

<template>
  <el-popover
      placement="bottom-start"
      :width="650"
      v-model:visible="showChooseIcon"
      trigger="click"
  >
    <template #reference>
      <el-input :value="modelValue" placeholder="点击选择图标" readonly ref="iconSelectRef">
        <template #prefix>
          <icon-svg :icon-name="props.modelValue" />
        </template>
        <template #suffix>
          <icon-svg :icon-name="showChooseIcon ? 'ArrowDown' : 'ArrowUp' " />
        </template>
      </el-input>
    </template>
    <div class="icon-box">
      <div class="icon-fitler">
        <el-input
            placeholder="请输入图标名称"
            prefix-icon="Search"
            v-model="filterText"
            clearable
        />
      </div>
      <div class="icon-list-content">
        <h3>svg-icon列表</h3>
        <div class="icon-list">
          <div
              class="icon-item"
              :class="{ 'icon-item-ictive': modelValue == item }"
              v-for="(item, index) in svgFilterList"
              @click="iconSelect(item)"
          >
            <icon-svg :icon-name="item" />
            {{ item }}
          </div>
        </div>
        <h3>el-icon列表</h3>
        <div class="icon-list">
          <div
              class="icon-item"
              :class="{ 'icon-item-ictive': modelValue == item }"
              v-for="(item, index) in iconFilterList"
              @click="iconSelect(item)"
          >
            <icon-svg :icon-name="item" />
            {{ item }}
          </div>
        </div>
      </div>
    </div>
  </el-popover>

</template>

<style scoped lang="scss">
.icon-box {
  padding: 0 12px;
  .icon-fitler {
    padding: 0 80px 8px;
  }

  .icon-list-content {
    max-height: 400px;
    overflow-y: auto;

    h3 {
      margin-top: 0;
    }

    .icon-list {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 8px;

      .icon-item {
        width: 145px;
        height: 30px;
      }

      .icon-item-ictive {
        color: var(--el-color-primary);
      }
    }
  }
}
</style>